<template>
    <div>
      <el-header>
        <van-nav-bar
          title="咖啡师-考生端"
          right-text="退出登录"
          left-arrow
          @click-left="goBack"
          @click-right="logout"
        />
      </el-header>
      <el-container style="height: max-content;  ">
        <el-aside width="auto" style="height: 100%;background-color: white">
          <div style="font-weight: bold; font-size: large">
            {{ '欢迎进入咖啡师考试系统!' }}<br>
            {{ '请选择工位进入答题。' }}<br>
          </div>
          <el-button class="refresh-btn" @click="onRefresh"
                     type="primary"
                     circle
                     icon="el-icon-refresh"
                     size="large" />
        </el-aside>
        <el-container>
          <el-main>
            <center>
              <el-button @click="toExamStation" type="primary" style="width: 80%;">点击进入考试</el-button>
            </center>
          </el-main>
        </el-container>
      </el-container>
    </div>

  </template>

<script>
import { getExamStationInfo,queryExam } from '@/api/examinee/examinee.js'
export default {
    name: "Examinee",
    data() {
        return {
            examId: null,
            msg: null,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,

        };
    },
    watch: {

    },
    created() {
        this.getInfoList()
      // this.enterFullscreen()
      
    },
    methods: {
      
        // enterFullscreen() {
        //   const element = document.documentElement; // 获取整个文档的根元素

        //   if (element.requestFullscreen) {
        //     element.requestFullscreen();
        //   } else if (element.mozRequestFullScreen) { // Firefox
        //     element.mozRequestFullScreen();
        //   } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
        //     element.webkitRequestFullscreen();
        //   } else if (element.msRequestFullscreen) { // IE/Edge
        //     element.msRequestFullscreen();
        //   }
        // },
        getInfoList() {
            this.loading = true;
            queryExam().then(res => {
              console.log("QUERYEXAM:",res.data.id)
              this.examId = res.data.id
            }).catch(res => {
              this.$message.error(res)
            })
        },


        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                getInfoList()
                this.loading = false;
                this.finished = true;

                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        goBack() {
            this.$router.back()
        },
        async logout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = '/index';
                })
            }).catch(() => { });
        },

        toExamStation(){
            // console.log("params:",item.paperId)
            this.$router.push({
                path: '/examinee/examStation',
                query: {
                    examId: this.examId,
                }
            })
        }


    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.refresh-btn {
  position: fixed;
  bottom: 90px;
  /* 样式可根据需求自定义 */
}
.footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
</style>
